<template> 
<div> 
    <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片 -->
    <el-card class="box-card">
      <el-form ref="form" :model="userVO" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="部门">
              <el-select
                v-model="userVO.departmentId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px"
                    ><el-tag type="danger" size="mini">{{
                      item.departCount
                    }}</el-tag></span
                  >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名">
              <el-input v-model="userVO.username" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱">
              <el-input v-model="userVO.email" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别">
              <el-radio-group v-model="userVO.sex">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
                <el-radio :label="''">全部</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="昵称">
              <el-input v-model="userVO.nickname" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-button type="primary" icon="el-icon-refresh" @click="reset"
              >重置</el-button
            >
                  <el-button type="success" icon="el-icon-search" @click="search"
              >查询</el-button
            >
            <el-button type="info" icon="el-icon-plus" @click="addUser"
              >添加</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-download"
              @click="exportExcel"
              >导出</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <!--表格内容显示区域-->
      <el-table :data="userList" border max-height="400" style="width: 100%">
        <el-table-column prop="id" label="#" width="50"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="110">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="60">
          <!-- 如何获取循环的对象 useList  双重三元表达式 -->
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "男" : scope.row.sex == 1 ? "女" : "保密" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="departName"
          sortable
          label="所属部门"
          width="180"
        >
        </el-table-column>
        <el-table-column sortable prop="birth" label="生日" width="180">
        </el-table-column>
        <el-table-column sortable prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="电话" width="150">
        </el-table-column>
        <el-table-column prop="status" label="是否禁用" width="100">
          <!-- scope表示当前表中的一行数据 -->
          <template slot-scope="scope">
            <!-- scope.row表示这一行的对象 -->
            <el-switch
              v-model="scope.row.status"
              active-color="#ff4949"
              inactive-color="#cccccc"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-s-tools"
          ></el-button>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5, 6, 7, 8]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <UserAdd
        :addOrUpdateVisible="addOrUpdateVisible"
        :departmentList="departmentList"
        @changeShow="showAddOrUpdate"
      ></UserAdd>
    </el-card>
  </div>

</template>

  
<script>
import UserAdd from '../../views/user/UserAdd.vue'
import {findDepartmentCountAndName} from '../../api/department.js'
import {findUserList,exportUserInfo} from '../../api/user.js'
export default {
  components: {
    UserAdd,
  },
data() {
    return {
      userVO: {
        departmentId: "",
        username: "",
        email: "",
        sex: "",
        nickname: "",
      },
      //部门集合
      departmentList: [],
      userList: [],
      //当前页码
      current: 1,
      //每页条数
      size: 5,
      //总条数
      total: 10,
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
    };
  },methods: {
   async exportExcel(){
       exportUserInfo(this.userVO).then(res => {
        //这里没有返回数据,但是要在响应头中进行下载操作
        // 将二进制文件转化为可访问的url
        let url = window.URL.createObjectURL(new Blob([res]));
        //创建了一个a标签的超链接
        var a = document.createElement("a");
        //将a标签添加到body内容中
        document.body.appendChild(a);
        a.href = url;
        a.download = "用户列表.xls";
        a.click();
        window.URL.revokeObjectURL(url);
    }).catch(err => {
      console.log(err);

    })
    },
    addUser(){
      this. addOrUpdateVisible=true;
    },
    //查询
  async  search() {
      this.userList=[];
      this.current = 1;
    this.getUserList();    
    },
    reset(){
      this.userVO={};
    },
      handleSizeChange(val) {
        this.size=val;
        this.getUserList();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.current=val;
        this.getUserList();
        console.log(`当前页: ${val}`);
      },
   async   getUserList(){
       let result= await findUserList(this.current,this.size,this.userVO);
       console.log(result);
       this.userList=result.data.userPage.records;
       this.total=result.data.userPage.total;
      },
      async getDepartmentCountAndName(){
       let result=   await findDepartmentCountAndName();
       this.departmentList=result.data.departmentCountAndName;
       console.log(result);
      } ,// 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data) {
      if (data === "false") {
        this.addOrUpdateVisible = false;
      } else {
        this.addOrUpdateVisible = true;
      }
    },
  },created(){
      this.getUserList();
      this.getDepartmentCountAndName();
  }
  
}
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 10px;
}
.el-input,
.el-select {
  width: 210px;
}

.el-pagination {
  margin-top: 10px;
}
</style>